<template>
  <h1>商品分页</h1>
  <el-table :data="shoplist" style="width: 100%">
    <el-table-column prop="proid" label="编号" width="200" />
    <el-table-column prop="category" label="名称" width="120" />
    <el-table-column  label="图片" width="180">
        <template #default="scope">
                <img class="img" :src="scope.row.img1" />
            </template>
        </el-table-column>
    <el-table-column prop="proname" label="品牌" width="250" />
    <el-table-column prop="sales" label="销量" width="100" />
    <el-table-column prop="stock" label="库存" width="100" />
    <el-table-column prop="originprice" label="价钱" width="100" />
   
  </el-table>
  <el-pagination v-model:page-size="params.limitNum" background layout="prev, pager, next" :total="total" @current-change="obtn" />
</template>

<script setup lang="ts">
import service from '../../../utlis/service';
import {reactive,ref} from 'vue'
//定义查询的结果
interface Ishops{
    banners:string,
    category:string,
    proname:string,
    originprice:number,
    isrecommend:number,
    img1:string,
    isseckill:number,
    stock:number,
    desc:string,
    sales:number,

}
let shoplist=reactive<Ishops[]>([])
//分页数据
const params = reactive<{
    count:number,
    limitNum:number
}>({
    count:1,
    limitNum:12
})

const total = ref(0);
const getshop=()=>{
    service({
        url:"/pro/list",
      params
        
    }).then(res=>{
        total.value = res.data.total;
        shoplist.length=0
        shoplist.push(...res.data.data)
        console.log(res.data.data);
        
        
        

    })
}
getshop()
//点击分页
const obtn=(value:number)=>{
    params.count=value
    
    getshop()

}



</script>

<style scoped>
.img{
    width: 100px;
    height: 75px;
}
.el-pagination{
    margin-top: 20px;
    text-align: center;
    margin-left: 200px;
}

</style>